<template>
  <div class="wrap">
    <div class="login">
      <h1>商品管理登陆</h1>
      <el-form :model="form" class="login-form">
        <el-form-item>
          <el-input v-model="form.user" placeholder="请输入用户名"/>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.password" type="password" placeholder="请输入密码"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" class="login-btn">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "LoginPage"
}
</script>
<script setup>
import {getCurrentInstance, reactive} from "vue";
import {postBackend} from "@/main";
import {ElMessage} from "element-plus";

const form = reactive({
  "user": '',
  "password": ''
})
const proxy = getCurrentInstance()
const onSubmit = () => {
  postBackend("/api/login", form, res => {
    if (res.data.code === 1) {
      ElMessage({
        message: res.data.msg,
        type: 'warning',
      })
      return
    }
    const token = res.data.entity
    localStorage.setItem("Token", token)
    ElMessage({
      message: '登陆成功',
      type: 'success',
    })
    proxy.emit('loginSuc', true)
  }, err => {
    ElMessage({
      message: '网络连接失败' + err.message,
      type: 'warning',
    })
  })
}

</script>

<style scoped>
body {

}

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);
}

.login {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 10px;

  background-color: #d9ecff;
  width: 400px;
  text-align: center;
}

.login-form {
  width: 80%;
}

.login-btn {
  display: block;
  width: 100%;
}
</style>
